<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单 - 影院订票系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .orders-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
        }
        .order-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 1.5rem;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        .order-card:hover {
            transform: translateY(-2px);
        }
        .order-header {
            background: #f8f9fa;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #dee2e6;
            display: flex;
            justify-content: between;
            align-items: center;
        }
        .order-content {
            padding: 1.5rem;
        }
        .movie-poster {
            width: 80px;
            height: 110px;
            object-fit: cover;
            border-radius: 8px;
        }
        .order-status {
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        .status-pending {
            background: #fff3cd;
            color: #856404;
        }
        .status-paid {
            background: #d1edff;
            color: #0c5460;
        }
        .status-cancelled {
            background: #f8d7da;
            color: #721c24;
        }
        .status-refunded {
            background: #d4edda;
            color: #155724;
        }
        .status-expired {
            background: #f8d7da;
            color: #721c24;
        }
        .order-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        .btn-sm {
            padding: 0.375rem 0.75rem;
            font-size: 0.875rem;
        }
        .no-orders {
            text-align: center;
            padding: 4rem 2rem;
            color: #666;
        }
        .seat-info {
            background: #f8f9fa;
            border-radius: 6px;
            padding: 0.5rem;
            margin-top: 0.5rem;
        }
        .seat-badge {
            background: #667eea;
            color: white;
            padding: 0.2rem 0.5rem;
            border-radius: 10px;
            font-size: 0.8rem;
            margin-right: 0.3rem;
            display: inline-block;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand fw-bold text-primary" href="${pageContext.request.contextPath}/movies">
                <i class="fas fa-film me-2"></i>影院订票系统
            </a>
            
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="${pageContext.request.contextPath}/movies">
                    <i class="fas fa-film me-1"></i>电影
                </a>
                <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        <i class="fas fa-user me-1"></i>${sessionScope.user.username}
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/orders">
                            <i class="fas fa-ticket-alt me-2"></i>我的订单
                        </a></li>
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/profile">
                            <i class="fas fa-user-edit me-2"></i>个人信息
                        </a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/logout">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 订单头部 -->
    <section class="orders-header">
        <div class="container">
            <h2><i class="fas fa-ticket-alt me-2"></i>我的订单</h2>
            <p class="mb-0">查看和管理您的电影票订单</p>
        </div>
    </section>

    <div class="container mt-4">
        <!-- 成功消息 -->
        <c:if test="${not empty message}">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </c:if>

        <!-- 错误信息 -->
        <c:if test="${not empty error}">
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>${error}
            </div>
        </c:if>

        <!-- 订单列表 -->
        <c:if test="${empty orders}">
            <div class="no-orders">
                <i class="fas fa-ticket-alt fa-4x mb-3 text-muted"></i>
                <h4>暂无订单</h4>
                <p class="text-muted mb-4">您还没有任何电影票订单</p>
                <a href="${pageContext.request.contextPath}/movies" class="btn btn-primary">
                    <i class="fas fa-film me-2"></i>去看电影
                </a>
            </div>
        </c:if>

        <c:forEach var="order" items="${orders}">
            <div class="order-card">
                <div class="order-header">
                    <div>
                        <strong>订单号：${order.orderNo}</strong>
                        <span class="ms-3 text-muted">
                            <fmt:formatDate value="${order.createdAt}" pattern="yyyy-MM-dd HH:mm"/>
                        </span>
                    </div>
                    <div>
                        <c:choose>
                            <c:when test="${order.status == 'PENDING'}">
                                <span class="order-status status-pending">待支付</span>
                            </c:when>
                            <c:when test="${order.status == 'PAID'}">
                                <span class="order-status status-paid">已支付</span>
                            </c:when>
                            <c:when test="${order.status == 'CANCELLED'}">
                                <span class="order-status status-cancelled">已取消</span>
                            </c:when>
                            <c:when test="${order.status == 'REFUNDED'}">
                                <span class="order-status status-refunded">已退款</span>
                            </c:when>
                            <c:when test="${order.status == 'EXPIRED'}">
                                <span class="order-status status-expired">已过期</span>
                            </c:when>
                        </c:choose>
                    </div>
                </div>
                
                <div class="order-content">
                    <div class="row">
                        <div class="col-md-2">
                            <img src="${order.showtime.movie.posterUrl != null ? order.showtime.movie.posterUrl : '/images/default-poster.jpg'}" 
                                 class="movie-poster" alt="${order.showtime.movie.title}">
                        </div>
                        <div class="col-md-7">
                            <h6 class="mb-2">${order.showtime.movie.title}</h6>
                            
                            <div class="row mb-1">
                                <div class="col-sm-6">
                                    <small class="text-muted">影院：</small>
                                    <span>${order.showtime.cinema.name}</span>
                                </div>
                                <div class="col-sm-6">
                                    <small class="text-muted">影厅：</small>
                                    <span>${order.showtime.hall.name}</span>
                                </div>
                            </div>
                            
                            <div class="row mb-1">
                                <div class="col-sm-6">
                                    <small class="text-muted">场次：</small>
                                    <span>
                                        <fmt:formatDate value="${order.showtime.showDate}" pattern="MM月dd日"/>
                                        <fmt:formatDate value="${order.showtime.showTime}" pattern="HH:mm"/>
                                    </span>
                                </div>
                                <div class="col-sm-6">
                                    <small class="text-muted">票数：</small>
                                    <span>${order.ticketCount}张</span>
                                </div>
                            </div>
                            
                            <c:if test="${not empty order.orderSeats}">
                                <div class="seat-info">
                                    <small class="text-muted d-block mb-1">座位：</small>
                                    <c:forEach var="orderSeat" items="${order.orderSeats}">
                                        <span class="seat-badge">
                                            ${orderSeat.seat.rowNum}排${orderSeat.seat.seatNum}座
                                        </span>
                                    </c:forEach>
                                </div>
                            </c:if>
                        </div>
                        <div class="col-md-3 text-md-end">
                            <div class="mb-2">
                                <span class="fs-5 fw-bold text-danger">¥${order.totalAmount}</span>
                            </div>
                            
                            <div class="order-actions">
                                <c:if test="${order.status == 'PENDING'}">
                                    <a href="${pageContext.request.contextPath}/user/payment?orderNo=${order.orderNo}" 
                                       class="btn btn-primary btn-sm">
                                        <i class="fas fa-credit-card me-1"></i>去支付
                                    </a>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" 
                                            onclick="cancelOrder('${order.orderNo}')">
                                        <i class="fas fa-times me-1"></i>取消
                                    </button>
                                </c:if>
                                
                                <c:if test="${order.status == 'PAID'}">
                                    <button type="button" class="btn btn-outline-danger btn-sm" 
                                            onclick="refundOrder('${order.orderNo}')">
                                        <i class="fas fa-undo me-1"></i>退票
                                    </button>
                                </c:if>
                                
                                <a href="${pageContext.request.contextPath}/user/orders?action=detail&orderNo=${order.orderNo}" 
                                   class="btn btn-outline-primary btn-sm">
                                    <i class="fas fa-eye me-1"></i>详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function cancelOrder(orderNo) {
            if (confirm('确定要取消这个订单吗？')) {
                const form = $('<form>', {
                    method: 'post',
                    action: '${pageContext.request.contextPath}/user/orders'
                });
                
                form.append($('<input>', {
                    type: 'hidden',
                    name: 'action',
                    value: 'cancel'
                }));
                
                form.append($('<input>', {
                    type: 'hidden',
                    name: 'orderNo',
                    value: orderNo
                }));
                
                $('body').append(form);
                form.submit();
            }
        }
        
        function refundOrder(orderNo) {
            if (confirm('确定要申请退票吗？退票后将按照退票规则扣除相应手续费。')) {
                const form = $('<form>', {
                    method: 'post',
                    action: '${pageContext.request.contextPath}/user/orders'
                });
                
                form.append($('<input>', {
                    type: 'hidden',
                    name: 'action',
                    value: 'refund'
                }));
                
                form.append($('<input>', {
                    type: 'hidden',
                    name: 'orderNo',
                    value: orderNo
                }));
                
                form.append($('<input>', {
                    type: 'hidden',
                    name: 'reason',
                    value: '用户主动退票'
                }));
                
                $('body').append(form);
                form.submit();
            }
        }
    </script>
</body>
</html>
